<%@ page language="java" import="java.util.*" pageEncoding="UTF-8"%>
<%@ include file="../../commons/taglibs.jsp"%>
<%@ include file="../../commons/list.jsp"%>
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
  <meta charset="utf-8">
  <title>车型管理</title>
  <meta name="renderer" content="webkit">
  <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
  <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
</head>
<body>
<script type="text/html" id="barDemo">
  <a class="layui-btn layui-btn-xs" lay-event="edit">编辑</a>
  <a class="layui-btn layui-btn-normal layui-btn-xs" lay-event="dataProject">维护</a>
  <a class="layui-btn layui-btn-danger layui-btn-xs" lay-event="del">删除</a>
</script>

<div style="padding-left: 20px;padding-bottom: 5px;padding-top: 10px">
	<span style="font-size: 18px">车系类别名称:</span>
	<input type="text" id='carCategoryName' class="layui-input" style="width: 200px;display: inline;">
	&nbsp;&nbsp;
	<span style="font-size: 18px">车型名称:</span>
	<input type="text" id='carmodelname' class="layui-input" style="width: 200px;display: inline;">
	&nbsp;&nbsp;
	<button class="layui-btn" id="queryBtn" data-type="reload" >
  		<i class="layui-icon">&#xe615;</i> 搜索
	</button>
	<button class="layui-btn" id="addBtn" >
  		<i class="layui-icon">&#xe654;</i> 新增
	</button>
</div>

<table id="demo" lay-filter="test"></table>
 
<script>
layui.use('table', function(){
  var table = layui.table;
  var layer = layui.layer;
  //第一个实例
  table.render({
    elem: '#demo'
    ,height: 'full-85'
    ,url: '<%=basePath%>controller/carModel/showList' //数据接口
    ,page: true //开启分页
    ,cols: [[ //表头
       {type:'numbers',title: '序号', width:'5%' ,align:'center'}
      ,{field: 'carCategoryName', title: '车系类别名称', width:'10%' }
      /* ,{field: 'carmodelid', title: '车型id', width:'10%'} */
      ,{field: 'carmodelname', title: '车型名称', width:'20%'}
      ,{field: 'otherName', title: '汽车别名', width:'10%'}
      ,{field: 'caryear', title: '年份', width:'10%' ,align:'center'}
      ,{field: 'carclassifyid', title: '是否在售', width:'10%' ,templet: function(d){
    	  var html = '';
    	  if(d.carclassifyid === '2'){
    		  html = "<span style='color: #F581B1;'>停售车型</span>"
   		  }
   		   if(d.carclassifyid === '1'){
   			 html = "<span style='color: #1E9FFF;'>在售车型</span>"
   		  }
   		  if(d.carclassifyid === ''){
   			 html = "<span style='color: #009688;'>暂无信息</span>"
   		  }
   		  return html;
      }}
      ,{field: 'carclassifyid2', title: '车系是否在售', width:'10%',templet: function(d){
    	  var html = '';
    	  if(d.carclassifyid2 === '2'){
    		  html = "<span style='color: #F581B1;'>停售车型</span>"
   		  }
   		   if(d.carclassifyid2 === '1'){
   			 html = "<span style='color: #1E9FFF;'>在售车型</span>"
   		  }
   		  if(d.carclassifyid2 === ''){
   			 html = "<span style='color: #009688;'>暂无信息</span>"
   		  }
   		  return html;
      }}
      ,{field: 'carprice', title: '市场指导价格', width:'10%' ,align:'center'}
      ,{fixed: 'right', title: '操作',width:'15%', align:'center', toolbar: '#barDemo'} //这里的toolbar值是模板元素的选择器
    ]]
   ,id: 'testReload'
   ,even: true //开启隔行背景
  });
  
  table.on('tool(test)', function(obj){ //注：tool是工具条事件名，test是table原始容器的属性 lay-filter="对应的值"
	  var data = obj.data; //获得当前行数据
	  var layEvent = obj.event; //获得 lay-event 对应的值（也可以是表头的 event 参数对应的值）
	  var tr = obj.tr; //获得当前行 tr 的DOM对象
	 
	 if(layEvent === 'del'){ //删除
	    layer.confirm('删除此数据也会删除里面的配置信息,真的删除么', function(index){
	      obj.del(); //删除对应行（tr）的DOM结构，并更新缓存
	      layer.close(index);
	      //向服务端发送删除指令
	      $.post("<%=basePath%>controller/carModel/delete?entityId="+data.id,function(data){
				if(data=='0'){
					 layer.msg('删除成功', {time:1000});
					 setTimeout(reload(),1500);
	        	}
	        	if(data=='1'){
	        		layer.msg('删除失败', {time:1000}); 
	        	}
	        	if(data=='2'){
	        		layer.msg('该数据已经关联了数据不能删除', {time:1000}); 
	        	}
			});
	    });
	  } else if(layEvent === 'edit'){ //编辑
		  //打开页面
		  layer.open({
			  type: 2, 
			  content: '<%=basePath%>controller/carModel/edit?entityId='+data.id, //这里content是一个URL，如果你不想让iframe出现滚动条，你还可以content: ['http://sentsin.com', 'no']
			  maxmin: true,
			  area: ['800px', '500px']
		  }); 
	  }else if(layEvent === 'dataProject'){ //数据维护
		  //打开页面
		  <%-- layer.open({
			  type: 2, 
			  content: '<%=basePath%>controller/carModel/dataProject?carmodelid='+data.carmodelid, 
			  maxmin: true,
			  area: ['1500px', '500px']
		  });  --%>
		  parent.window.openPage('<%=basePath%>controller/carModel/dataProject?carmodelid='+data.carmodelid);
	  }
	});
  function reload(){
	  table.reload('testReload', {
		});
  }
  
  $("#queryBtn").click(function(){
	  var carCategoryName = $('#carCategoryName').val().trim();;
	  var carmodelname = $('#carmodelname').val().trim();;
	  
 	   table.reload('testReload', {
		  where: {'carCategoryName':carCategoryName,'carmodelname':carmodelname} //设定异步数据接口的额外参数
		  ,page: {
			    curr: 1 //重新从第 1 页开始
		  }
		});
  });
  
   $("#addBtn").click(function(){
	   //打开页面
	  layer.open({
		  type: 2, 
		  content: '<%=basePath%>controller/carModel/edit', //这里content是一个URL，如果你不想让iframe出现滚动条，你还可以content: ['http://sentsin.com', 'no']
		  maxmin: true,
		  area: ['800px', '500px']
	  }); 
  })
  
});

function addReload(){
	var table = layui.table;
	layui.use(['table','element'], function(){
	   var carCategoryName = $('#carCategoryName').val().trim();
	   var carmodelname = $('#carmodelname').val().trim();
 	   table.reload('testReload', {
		  where: {'carCategoryName':carCategoryName,'carmodelname':carmodelname} //设定异步数据接口的额外参数
		});
	});
}

/**
 * 按回车搜索
 */
document.onkeydown = function(e) {
	// 浏览器兼容
	e = e ? e : window.event;
	var keyCode = e.which ? e.which : e.keyCode;
	if (keyCode == 13) // 回车键的键值为13
	{
		$('#queryBtn').click();// 调用搜索
	}
};

</script>

</body>
</html>
